<template>
	<view class="list" @click="closeLikesPup">
		
		<view class="left">
			<image :src="item.avatar ? item.avatar : '/static/avatar/default_avatar.png'" class="image"></image>
		</view>
		
		<view class="right">
			<!-- 名字 -->
			<text class="name">{{item.user_name}}</text>
			<!-- 类容---文字 -->
			<text class="main_text">{{item.content}}</text>
			<!-- 类容 ---- 图片 -->
			<view v-if="item.image.length > 0">
				<!-- 单图 -->
				<image v-if="item.image === 1"
				:src="item.image[0]" mode="aspectFill" class="sim_image"></image>
				<!-- 多图 -->
				<view class="d_image" v-else>
					<image :src="url" class="image" v-for="(url,i) in item.image" :key="i"></image>
				</view>
			</view>
			<!-- 视频 -->
			<view class="video_wrap" v-if="item.video">
				<video :src="item.video.url" :poster="item.video.poster" class="video"></video>
			</view>
			<!-- 发布时间 -->
			<view class="time">
				<text class="text_time">{{getTime}}</text>
				<view class="option" @click.stop="top">
					<text class="iconfont text">&#xe607;</text>
				</view>
				<view class="option_pup" ref="optionPupRer"
				 :style="pupStyle" v-if="isOptions">
					<view class="op_item first" @click="sendLikes(item)">
						<text class="iconfont op">&#xe614;</text>
						<text class="op">点赞</text>
					</view>
					<view class="op_item" @click.stop="sendComment(item.moment_id,'',true)">
						<text class="iconfont op">&#xe68d;</text>
						<text class="op">评论</text>
					</view>
				</view>
			</view>
			<!-- 评论和点赞 -->
			<view class="comment" v-if="item.likes.length > 0 || item.comments.length > 0">
				<!-- 点赞 -->
				<view class="comment_top" v-if="item.likes.length > 0">
					<view class="item" v-for="(l,li) in item.likes" :key="li">
						<text class="iconfont icon text">&#xe614;</text>
						<text class="text">{{l.name}}</text>
					</view>
				</view>
				<!-- 评论 -->
				<view class="comment_buttom" v-if="item.comments.length > 0">
					<view class="item" v-for="(c,ci) in item.comments" :key="ci">
						<block v-if="!c.reply">
							<text class="buttom_name" @click.stop="sendComment(item.moment_id,c.user,false)">@{{c.user.name}}: </text>
							<text class="content">{{c.content}}</text>
						</block>
						<block v-else>
							<!-- @xx回复xx：类容 -->
							<text class="buttom_name" @click.stop="sendComment(item.moment_id,c.reply,false)">@{{c.reply.name}}回复@{{c.user.name}}:</text>
							<text class="content">{{c.content}}</text>
						</block>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 评论输入框 -->
		<view class="pupop_input" v-if="isCommentStatus">
			<input type="text"  :focus="true" :auto-blur="true"
			placeholder="请文明发言" @confirm="confirm" class="input"
			v-model="content"/>
		</view>
		
	</view>
</template>

<script setup>
  import { computed, ref, watchEffect } from 'vue';
	import useUser from '@/pinia/user';
	import $T from '@/lib/time.js'
	import $S from '@/server/server.js'
	
	const props = defineProps({
		item:{
			type: Object,
			default: () => {}
		}
	})
	
	const animation = weex.requireModule('animation')
	const isOptions = ref(false) // 评论和点赞的弹层是否出现
	const isOptionsAnimation = ref(false) // 评论和点赞的弹层是否出现动画
	const optionPupRer = ref(null)  // 点赞评论弹层的实例
	const isCommentStatus = ref(false) // 是否处于评论状态
	const comment_id = ref(0) // 当前评论的朋友圈id
	const reply_id = ref(0) // 回复的id
	const reply_name = ref('') // 回复的name
	const content = ref('') // 评论内容
	
	const pupStyle = ref(`transform: scale(0,0);opacity: 0;`) // 点赞弹层的样式
	
	const userStore = useUser()
	
	const userinfo = userStore.userinfo // 获得个人信息
	
	// 计算出当前朋友圈的时间
	const getTime = computed(() => {
		return $T.gettime(props.item.created_at)
	})
	
	const top = () => { // 点击操作 点赞 评论
		if(!isOptions.value){
			isOptions.value = true
			isOptionsAnimation.value = true
		}else{
			isOptionsAnimation.value = false
			setTimeout(() => {
				isOptions.value = false
			},200)
		}
	}
	
	// 点击其他区域关闭点赞评论的弹层
	const closeLikesPup = () => {
		isOptions.value = false
		isCommentStatus.value = false
		uni.hideKeyboard()
	}
	
	// 点赞
	const sendLikes = (item) => {
		$S.post(`/moment/like/${item.moment_id}`,{},{token:true})
		.then(res => {
			const index = item.likes.findIndex(f => f.id === userinfo.id)
			if(index === -1){
				item.likes.push({
					id: userinfo.id,
					name: userinfo.nickname ? userinfo.nickname : userinfo.username
				})
			}else{
				item.likes.splice(index,1)
			}
		})
	}
	
	// 评论
	const sendComment = (c_id,r,flag=false) => {
		comment_id.value = c_id
		reply_id.value = r.id ? r.id : 0
		reply_name.value = r.name ? r.name : 0
		isCommentStatus.value = !isCommentStatus.value
		console.log(comment_id.value,reply_id.value);
		if(flag) isOptions.value = false
	}
	
	const confirm = () => {
		const obj = {
			content: content.value,
			reply_id: reply_id.value ? reply_id.value : 0
		}
		$S.post(`/moment/comment/${comment_id.value}`,obj,{token:true})
		.then(res => {
			if(reply_id.value === 0){
				props.item.comments.push({
					content: content.value,
					user:{
						id: userinfo.id,
						name: userinfo.nickname ? userinfo.nickname : userinfo.username
					},
					reply: null
				})
			}else{
				props.item.comments.push({
					content: content.value,
					user:{
						id: userinfo.id,
						name: userinfo.nickname ? userinfo.nickname : userinfo.username
					},
					reply: {
						id: reply_id.value,
						name: reply_name.value
					}
				})
			}
			content.value = ''
			reply_id.value = 0
			reply_name.value = ''
		})
	}
	
	watchEffect(() => { // 控制点赞和评论的弹层动画
		if(isOptionsAnimation.value){
			animation.transition(optionPupRer.value, {
				styles: {
					opacity: 1,
					transform: 'scale(1,1)',
					transformOrigin: 'right center'
				},
				duration: 200, 
				timingFunction: 'ease'
			},() => {
				pupStyle.value = `transform: scale(1,1);opacity: 1;`
			})
		}else{
			animation.transition(optionPupRer.value, {
				styles: {
					opacity: 0,
					transform: 'scale(0,0)',
					transformOrigin: 'right center'
				},
				duration: 200, 
				timingFunction: 'ease'
			},() => {
				pupStyle.value = `transform: scale(0,0);opacity: 0;`
			})
		}
	})
	
</script>

<style lang="less" scoped>
	.list{
		padding: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		.left{
			margin-right: 20rpx;
			.image{
				height: 100rpx;
				width: 100rpx;
				border-radius: 15rpx;
			}
		}
		
		.right{
			flex: 1;
			display: flex;
			flex-direction: column;
			.name{
				font-size: 35rpx;
				color: #005354;
			}
			.main_text{
				font-size: 30rpx;
				color: #333;
				margin-bottom: 20rpx;
			}
			.sim_image{
				width: 300rpx;
			}
			.d_image{
				display: flex;
				flex-direction: row;
				// background-color: red;
				flex-wrap: wrap;
				.image{
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					width: 180rpx;
					height: 180rpx;
				}
			}
			.video_wrap{
				margin-top: 15rpx;
				.video{
					height: 300rpx;
				}
			}
			.time{
				height: 50rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;
				position: relative;
				.text_time{
					font-size: 25rpx;
					color: #005354;
				}
				.option{
					background-color: #eee;
					padding: 5rpx 10rpx;
					border-radius: 5rpx;
					.text{
						font-size: 30rpx;
						color: #005354;
					}
				}
				.option_pup{
					width: 250rpx;
					position: absolute;
					right: 50rpx;
					display: flex;
					flex-direction: row;
					padding: 5rpx 0rpx;
					background-color: #4c4c4c;
					border-radius: 10rpx;
					.first{
						border-right: 1rpx solid #333;
					}
					.op_item{
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						// background-color: red;
						.op{
							color: #fff;
							font-size: 30rpx;
						}
					}
				}
			}
			.comment{
				padding: 20rpx;
				margin-top: 10rpx;
				background-color: #f0f0f0;
				.comment_top{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					padding-bottom: 5rpx;
					margin-bottom: 8rpx;
					border-bottom: 1rpx solid #aaa;
					.item{
						display: flex;
						flex-direction: row;
						align-items: center;
						.icon{
							font-size: 30rpx;
							margin-right: 5rpx;
						}
						.text{
							color: #005354;
							font-size: 30rpx;
						}
					}
				}
				.comment_buttom{
					display: flex;
					flex-direction: column;
					.item{
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						flex-wrap: wrap;
						.buttom_name{
							color: #005354;
							font-size: 30rpx;
						}
						.content{
							// flex: 1;
							font-size: 30rpx;
						}
					}
				}
			}
		}
		.pupop_input{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			padding: 10rpx 20rpx;
			// background-color: red;
			background-color: #fff;
			.input{
				flex: 1;
				padding: 5rpx 10rpx;
				border-bottom: 1rpx solid #333;
			}
		}
	}
</style>